<template>
  <div class="app-container">
    <!-- 表头工具栏 -->
    <div class="toolbar-container">
      <el-upload         
        :on-success="handleFileUploadSuccess"
        :show-file-list="false"
        :name="uploadFileName"
        :before-upload="handleBeforeUpload"
        :on-error="handleFileUploadError"
        action="http://localhost:8888/loms/area/upload" >
        <el-button size="small" type="primary" icon="el-icon-delete">批量删除</el-button>
        <el-button size="small" type="primary" icon="el-icon-tickets">点击上传</el-button>
      </el-upload>          
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
      >

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column label="省" width="120" align="center" prop="province" />
      <el-table-column label="市" width="120" align="center" prop="city" />
      <el-table-column label="区" width="120" align="center" prop="district" />
      <el-table-column label="邮编" width="120" align="center" prop="postcode" />
      <el-table-column label="简码" width="120" align="center" prop="shortcode" />
      <el-table-column label="城市编码" align="center" prop="citycode" />

      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button v-if="scope.row.status != 'deleted'" size="mini" type="danger" 
            @click="handleDelete(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="pageQuery.page" 
        :page-sizes="[10,20,30]" 
        :page-size="pageQuery.size" 
        :total="total" background 
        layout="total, sizes, prev, pager, next, jumper" 
        @size-change="onPageSizeChange" 
        @current-change="onPageChange"/>
    </div>
  </div>
</template>

<script>
import { 
  fetchPage
} from '@/api/area'

export default {
  data() {
    return {
      uploadFileName:'excel',
      selectedItems: [],
      list: [],
      total: null,
      listLoading: false,
      dialogVisible: false,
      fileUploadUrl: process.env.BASE_API + 'area/upload',
      pageQuery: {
        page: 1,
        size: 20
      },

      // 绑定当前编辑或者新建对话框里面表单的数据
      item: {
      },

      // 表单的校验规则
      rules: {
      },
    }
  },

  created() {
    // 页面创建的时候，去加载文章列表
    this.getList()
  },

  methods: {
    // 加载文章列表
    getList() {
      this.listLoading = true

      // 发送http请求，获取数据
      fetchPage(this.pageQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    },
    // 文件上传之前的处理
    handleBeforeUpload(file) {
      // 此处可以做文件后缀的校验、文件大小的校验
      console.log(file)
    },

    handleFileUploadSuccess(response) {
      console.log(response)
    },

    handleSelectionChange(selected) {
      this.selectedItems = selected
    },

    handleFileUploadError(error) {
      console.log(error)
    },

    onFileUploadSuccess() {

    },

    beforeFileUpload(file) {
      console.log(file);
    },

    handleDeleteBatch() {

    },

    onPageSizeChange(size) {
      this.pageQuery.size = size
      this.getList()
    },

    onPageChange(page) {
      this.pageQuery.page = page
      this.getList()
    },

    handleSearch() {
    },

    handleDelete(id) {
    },

    handleUpdate(row) {
    },

    updateData() {
    },

    handleSelectionChange(selected) {
      this.selectedItems = selected;
    }
  }
}
</script>
